<template>
	<view class="page">
		<view class="con-box">
			<view class="item">
				<view class="left">
					活动名
				</view>
				<view class="add-box">
					<input class="inp" :disabled="editEnable" v-model="space.title" type="text" maxlength="20" value="" placeholder="例如 晚8点体育场踢足球"/><icon v-if="sureTitle" type="warn"></icon>
				</view>
			</view>
			<view class="item">
				<view class="left">
					活动项目
				</view>
				<view class="add-box">
					<input class="inp" :disabled="editEnable" v-model="space.project" type="text" maxlength="20" value="" placeholder="例如 羽毛球"/><icon v-if="sureProject" type="warn"></icon>
				</view>
			</view>
			<view class="item">
				<view class="left">
					人数上限
				</view>
				<view class="add-box">
					<input class="inp" :disabled="editEnable" v-model="space.count" type="number" maxlength="3" value=""/><icon v-if="sureCount" type="warn"></icon>
				</view>
			</view>
			<view class="item">
				<view class="left">
					活动时间
				</view>
				<view class="add-box">
					<input class="inp" v-if="!editEnable" @click="onShowDatePicker('datetime')" v-model="space.spacetime" disabled="true" type="text" maxlength="20" value="" placeholder="请选择"/><icon v-if="sureSpaceTime && !editEnable" type="warn"></icon>
					<input class="inp" v-if="editEnable" v-model="space.spacetime" disabled="true" type="text" maxlength="20"/>
				</view>
			</view>
			<view class="item">
				<view class="left">
					活动地点
				</view>
				<view class="add-box">
					<input class="inp" :disabled="editEnable" v-model="space.address" type="text" maxlength="20" value="" placeholder="区域及详细地址"/><icon v-if="sureAddress" type="warn"></icon>
				</view>
			</view>
			<view class="item">
				<view class="left">
					详细说明
				</view>
				<view class="add-box">
					<input class="inp" v-model="space.remark" type="text" maxlength="20" value="" placeholder="100字以内"/></icon>
				</view>
			</view>
			<button class="publish" v-if="!editEnable" :disabled="surePubl" @tap="publish">确认发布</button>
			<button v-if="space.joinFlag == 0" class="publish" :disabled="surePubl" @tap="publish">确认发布</button>
			<button v-if="space.joinFlag == 1" class="publish" :disabled="surePubl" @tap="publish">确认发布</button>
		</view>
		<mxDate :show="showPicker" format="yyyy-mm-dd hh:ii" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	
	import mxDate from '../../../../components/mx-datepicker/mx-datepicker.vue'
	
	export default {
		data() {
			return {
				circleId: '',
				spaceId: '',
				userInfo: {},
				space: {circleId: '',title: '', project: '', count: '',
					spacetime: '', address: '', createUser: '', remark: ''},
				date: '2019/01/01',
				value: '',
				type: '',
				showPicker: false,
				editEnable: true
			}
		},
		onLoad(params) {
			this.circleId = params.circleId;
			this.spaceId = params.spaceId;
			this.userInfo = this.getGlobalUser("globalUser");
			if (this.spaceId == null){
				this.editEnable = false;
			}else {
				this.getSpaceInfo();
			}
		},
		computed: {
			surePubl(){
				if(this.space.title == null || this.space.title == '' || 
					this.space.project == null || this.space.project == '' ||
					this.space.count == null || this.space.count == '' || this.space.count < 2 ||
					this.space.spacetime == null || this.space.spacetime == '' ||
					this.space.address == null || this.space.address == ''){
					return true;
				}
				return false;
			},
			sureTitle(){
				if (this.space.title == null || this.space.title == '') {
					return true;
				}else {
					return false;
				}
			},
			sureProject(){
				if (this.space.project == null || this.space.project == '') {
					return true;
				}else {
					return false;
				}
			},
			sureCount(){
				if (this.space.count == null || this.space.count == '' || this.space.count < 2) {
					return true;
				}else {
					return false;
				}
			},
			sureSpaceTime(){
				if (this.space.spacetime == null || this.space.spacetime == '') {
					return true;
				}else {
					return false;
				}
			},
			sureAddress(){
				if (this.space.address == null || this.space.address == '') {
					return true;
				}else {
					return false;
				}
			}
		},
		methods: {
			getSpaceInfo(){
				this.$apis.getSpaceInfo({"spaceId": this.spaceId, memId: this.userInfo.id}).then((res) => {
					if(this.userInfo.id == res.createUser){
						this.editEnable = false;
					}
					this.space = res;
				});
			},
			// 日期时间选择
			onShowDatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					//选择的值
					this.space.spacetime = e.value + ":00";
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			publish(){
				this.space.createUser = this.userInfo.id;
				var circleId = this.circleId;
				this.space.circleId = circleId;
				this.space.spacetime = this.space.spacetime;
				this.$apis.saveSpace(this.space).then((res) => {
					uni.redirectTo({
						url: '../../circleInfo/circleInfo?circleId=' + circleId
					})
				});
			},
		},
		components:{
			mxDate
		}
	}
</script>

<style>
	@import url("addSpace.css");
</style>
